<template>
	<Cascader :data="data" :load-data="loadData" @on-change="change" filterable></Cascader>
</template>
<script>
	import {post}  from '@/util/request'

	export default {
			data(){
				return {
					data:[]
				}
			},
			async mounted(){
				let res = await post('/common/findAllVehicleBrand');
				this.data = res.data.data.map(v=>({
					value:v.id,
					label:v.name,
					type:1,
					children:[],
					loading:false
				}))
			},
			methods:{
				async loadData(v,cb){
					let res;
					v.loading = true;
					if(v.type===1){
						res = await post('/common/findVehicleSeriesByBrandId',{brandId:v.value});
						v.children = res.data.data.map(i=>({
							value:i.id,
							label:i.name,
							type:2,
							children:[],
							loading:false
						}))
					}else{
						res = await post('/common/findVehicleTypesBySeriesId',{seriesId:v.value});
						v.children = res.data.data.map(i=>({
							value:i.id,
							label:i.name,
							type:3
						}))
					}
					v.loading = false;
					cb();
				},
				change(v){

				}
			}
	}
</script>